<!-- 发行优惠券 -->
<template>
	<view class="Issuecoupons">
		<!-- <h3>发行优惠券</h3> -->
		<u-tabs class="u-tabs" :list="list" :is-scroll="false" :current="current" @change="change" active-color="#EC5F2F" bar-width="90"></u-tabs>
		<view class="kong-zw"></view>
		<view v-show="leirongShow" class="add">
			<view class="add-box"  @click="getaddcoupons">
				<image src="../../../static/images/jiahao.png" mode="aspectFit"></image>
				<text>添加</text>
			</view>
		</view>
		<view @click="getfxyhqdetail(item.id,item.status_label)" v-show="true" v-for="(item,index) in kaquanlist" :key="item.id" class="img-item">
			<view class="img-btn-tit">
				<image :src="item.coupon_img_1" mode="scaleToFill"></image>
				<view v-show="item.dhjlShow" @click.stop="getforrecord(item.id)" class="tit">
					<text>兑换记录 ></text>
				</view>
			</view>
			<view class="middle-text">
				<text>{{item.name}}</text>
				<view class="r-text">
					<text>￥</text>
					<text>{{item.price}}</text>
				</view>
			</view>
			<view class="middle2-text">
				<text>有效期：{{item.start_time}}-{{item.end_time}}</text>
			</view>
			<view class="footer-text">
				<view class="bottom-text">
					<text>发行量</text>
					<text>{{item.total_num}}</text>
				</view>
				<view class="bottom-text">
					<text>已派发</text>
					<text>{{item.receive_num}}</text>
				</view>
				<view class="bottom-text">
					<text>已使用</text>
					<text>{{item.off_num}}</text>
				</view>
			</view>
			<view class="img-show">
				<image v-show="item.dshShow" src="../../../static/images/daishenhe.png" mode="aspectFit"></image>
				<image v-show="item.dtsShow" src="../../../static/images/datishen.png" mode="aspectFit"></image>
				<image v-show="item.wtgShow" src="../../../static/images/weitongguo.png" mode="aspectFit"></image>
				<image v-show="item.ygqShow" src="../../../static/images/yiguoqi.png" mode="aspectFit"></image>
				<image v-show="item.yxjShow" src="../../../static/images/yixiajia.png" mode="aspectFit"></image>
			</view>
		</view>
		<view v-show="gengduoShow" class="bottom-tit">
			<text>没有更多优惠券了</text>
		</view>
		<!-- 空状态页 -->
		<view v-show="empty" class="empty-state">
			<image src="../../../static/images/kongzhuantai.png" mode="aspectFit"></image>
			<p>暂未发行优惠券</p>
			<view class="btn" @click="getaddcoupons">
				<text>+</text>
				<text>添加</text>
			</view>
		</view>
		<!-- 下拉加载动画 -->
		<u-loading class="u-loading" mode="flower" :show="loadingShow"></u-loading>
	</view>
</template>

<script>
	import {shareMixins} from '../../../mixins/share.js'
	export default {
		mixins:[shareMixins],
		data() {
			return {
				shareData: {
				    title: '空港卡券联盟商户端',
				    path: '/pages/mine/mine' // 分享的页面路径
				},
				kaquanlist:[],
				list: [
					{
						name: '全部'
					}, 
					{
						name: '未派发'
					}, 
					{
						name: '已派发',
					},
					{
						name: '已使用',
					},
					{
						name: '已过期',
					},
				],
				current: 0,
				empty:false,
				pindex: 1,
				psize: 3,
				type:'all',//默认获取未派发
				loadingShow:false ,// 加载状态
				gengduoShow:false,
				leirongShow:false
			}
		},
		onShow(){
			this.kaquanlist = []
			this.pindex = 1
			this.getSelfCouponList()
		},
		onLoad(){
			this.kaquanlist = []
			this.gengduoShow = true
		},
		onReachBottom(){
			this.pindex++
			this.loadingShow = true
			this.getSelfCouponList(); // 获取数据
			this.gengduoShow = true
			if(this.gengduoShow == true){
				this.loadingShow = false
			}
		},
		methods: {
			async getSelfCouponList(){//获取发行优惠券列表
				var data = {
					pindex: this.pindex,
					psize: this.psize,
					type: this.type
				}
				const res = await this.$myRequest({
					url:'/api/businessCoupon/getSelfCouponList'+ this.$u.queryParams(data)
				}).then((res) => {
					this.kaquanlist = [...this.kaquanlist,...res.data.data.data]
					if(this.kaquanlist.length == 0){
					 this.empty = true
					 this.leirongShow = false
					 this.gengduoShow = false
					}else{
						this.empty = false
						this.leirongShow = true
						this.gengduoShow = true
					}
					this.kaquanlist.forEach((i) => {
						i.dhjlShow = false
						i.dshShow = false						i.dtsShow = false
						i.wtgShow = false								i.ygqShow = false
						i.yxjShow = false
						// console.log(i)
						if(i.status_label == '审核通过'){
							i.dhjlShow = true
						}else if(i.status_label == '待提交审核'){
							i.dtsShow = true
						}else if(i.status_label == '待审核'){
							i.dshShow = true
						}else if(i.status_label == '审核未通过'){
							i.wtgShow = true
						}else if(i.status_label == '下架'){
							i.yxjShow = true
							i.dhjlShow = true
						}else if(i.status_label == '已过期'){
							i.ygqShow = true
							i.dhjlShow = true
						}
					})
				})
			},
			getforrecord(id){//点击兑换记录跳转到兑换记录页，传点击的id
			// console.log(id)
				uni.setStorageSync('id',id)
					uni.switchTab({
						url:'../../../pages/forrecord/forrecord'
					})
			},
			change(index) {//点击tabs切换对应的卡券
				this.current = index;
				if(index === 0){
					this.type = 'all'
					this.kaquanlist = []
					this.pindex = 1
					this.getSelfCouponList()
				}else if(index === 1){
					this.type = 'not_distributed'
					this.kaquanlist = []
					this.pindex = 1
					this.getSelfCouponList()
				}else if(index === 2){
					this.type = 'distributed'
					this.kaquanlist = []
					this.pindex = 1
					this.getSelfCouponList()
				}else if(index === 3){
					this.type = 'used'
					this.kaquanlist = []
					this.pindex = 1
					this.getSelfCouponList()
				}else if(index === 4){
					this.type = 'overdue'
					this.kaquanlist = []
					this.pindex = 1
					this.getSelfCouponList()
				}
				
			},
			getaddcoupons(){//跳转添加优惠券页面
				uni.navigateTo({
					// url:'./addcoupons/addcoupons'
					url:'../addcoupons/addcoupons'
				})
			},
			getfxyhqdetail(id,status_label){//跳转发行优惠券详情
			// console.log(status_label)
				uni.navigateTo({
					// url:'./couponsdetail/couponsdetail'
					url:'../couponsdetail/couponsdetail?id='+id+'&status_label='+status_label
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Issuecoupons {
		.u-tabs{
			position: fixed;
			width: 100%;
			height: auto;
			z-index: 999;
		}
		.kong-zw{
			width: 100%;
			height: 100rpx;
		}
		.add{
			width: 92%;
			height: auto;
			margin: auto;
			margin-top: 32rpx;
			background-color: #FFFFFF;
			padding: 24rpx 0;
			border-radius: 18rpx;
			margin-bottom: 24rpx;
			.add-box{
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 28rpx;
					height: 28rpx;
					margin-right: 12rpx;
				}
			}
		}
		.img-item{
			width: 92%;
			margin: auto;
			background-color: #FFFFFF;
			margin-bottom: 24rpx;
			border-radius: 20rpx;
			.img-btn-tit{
				position: relative;
				image{
					width: 100%;
					height: 252rpx;
				}
				.tit{
					position: absolute;
					right: 20rpx;
					bottom: 14rpx;
					background-color: rgba(255,255,255,0.5);
					width: 146rpx;
					height: 42rpx;
					border-radius: 20rpx;
					text-align: center;
					text{
						color: #3C3C3C;
						font-size: 24rpx;
						line-height: 42rpx;
						margin: 0;
						padding: 0;
					}
				}
			}
			.middle-text{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24rpx 24rpx 2rpx 24rpx;
				text{
					font-size: 40rpx;
					color: #3C3C3C;
					font-weight: bold;
				}
				.r-text{
					display: flex;
					align-items: center;
					text:nth-child(1){
						font-size: 32rpx;
						color: #EC5F2F;
					}
					text:nth-child(2){
						font-size: 52rpx;
						color: #EC5F2F;
					}
				}
			}
			.middle2-text{
				text{
					padding-left: 24rpx;
					font-size: 24rpx;
					color: #8B8B8B;
				}
			}
			.footer-text{
				padding: 34rpx 0 30rpx 24rpx;
				display: flex;
				justify-content: space-between;
				width: 85%;
				.bottom-text{
					text:nth-child(1){
						font-size: 28rpx;
						color: #3C3C3C;
						margin-right: 12rpx;
					}
					text:nth-child(2){
						color: #EC5F2F;
					}
				}
			}
			.img-show{
				position: relative;
				image{
					position: absolute;
					right: 0;
					bottom: 0;
					width: 90rpx;
					height: 90rpx;
				}
			}
		}
		.img-item3{
			width: 92%;
			margin: auto;
			background-color: #FFFFFF;
			margin-bottom: 24rpx;
			border-radius: 20rpx;
			.img-btn-tit{
				position: relative;
				image{
					width: 100%;
					height: 252rpx;
				}
				.tit{
					position: absolute;
					right: 20rpx;
					bottom: 14rpx;
					background-color: rgba(255,255,255,0.5);
					width: 146rpx;
					height: 42rpx;
					border-radius: 20rpx;
					text-align: center;
					text{
						color: #8B8B8B;
						font-size: 24rpx;
						line-height: 42rpx;
						margin: 0;
						padding: 0;
					}
				}
			}
			.middle-text{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24rpx 24rpx 2rpx 24rpx;
				text{
					font-size: 40rpx;
					color: #8B8B8B;
					font-weight: bold;
				}
				.r-text{
					display: flex;
					align-items: center;
					text:nth-child(1){
						font-size: 32rpx;
						color: #8B8B8B;
					}
					text:nth-child(2){
						font-size: 52rpx;
						color: #8B8B8B;
					}
				}
			}
			.middle2-text{
				text{
					padding-left: 24rpx;
					font-size: 24rpx;
					color: #8B8B8B;
				}
			}
			.footer-text{
				padding: 34rpx 0 30rpx 24rpx;
				display: flex;
				justify-content: space-between;
				width: 85%;
				.bottom-text{
					text:nth-child(1){
						font-size: 28rpx;
						color: #8B8B8B;
						margin-right: 12rpx;
					}
					text:nth-child(2){
						color: #8B8B8B;
					}
				}
			}
			.r-state{
				position: relative;
				image{
					width: 90rpx;
					height: 90rpx;
					position: absolute;
					bottom: 0;
					right: 0;
				}
			}
		}
		.bottom-tit{
			text-align: center;
			margin-top: 94rpx;
			margin-bottom: 170rpx;
			text{
				font-size: 24rpx;
				color: #8B8B8B;
			}
		}
		.empty-state{
			text-align: center;
			image{
				width: 196rpx;
				height: 158rpx;
				margin-top: 146rpx;
				margin-bottom: 12rpx;
			}
			p{
				font-size: 28rpx;
				color: #8B8B8B;
				margin-bottom: 56rpx;
			}
			.btn{
				width: 306rpx;
				height: 76rpx;
				border-radius: 38rpx;
				margin: auto;
				display: flex;
				align-items: center;
				justify-content: center;
				background: linear-gradient(#FFEED9,#FFE7CB,#FFDDB9);
				text{
					font-size: 28rpx;
					color: #EC5F2F;
				}
				text:nth-child(1){
					font-size: 60rpx;
					color: #EC5F2F;
					margin-right: 12rpx;
				}
			}
		}
		.u-loading{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 40rpx;
		}
	}
</style>
